<template>
    <template v-if="item.type === 'directory'">
      <el-sub-menu :index="item.id.toString()">
        <template #title>
          <el-icon v-if="item.icon">
            <component :is="item.icon" />
          </el-icon>
          <span>{{ item.name }}</span>
        </template>
        <template v-for="child in item.children" :key="child.id">
          <MenuItem :item="child" />
        </template>
      </el-sub-menu>
    </template>
    
    <el-menu-item v-else :index="item.path">
      <el-icon v-if="item.icon">
        <component :is="item.icon" />
      </el-icon>
      <span>{{ item.name }}</span>
    </el-menu-item>
  </template>
  
  <script setup>
  defineProps({
    item: {
      type: Object,
      required: true
    }
  })
  </script>